<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onUpdated,
  onUnmounted,
  computed,
} from "vue";
import useCounter from "../hooks/index";

defineProps<{ msg: string }>();

const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

const reactiveObj = reactive({ count: 0 });

onMounted(() => {
  console.log("component mounted");
});

onUpdated(() => {
  console.log("component updated");
});

onUnmounted(() => {
  console.log("component unmounted");
});

const hooksCount = useCounter(0);

const doubleCount = computed(() => count.value * 2);
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <button type="button">doubleCount is {{ doubleCount }}</button>
    <button type="button" @click="reactiveObj.count++">
      reactiveObj.count is {{ reactiveObj.count }}
    </button>
    <button type="button" @click="hooksCount.increment()">
      hooksCount.count is {{ hooksCount.count }}
    </button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
